<template>
  <Card class="trend-div">
    <div class="query-header " >
      <a-form
        :model="queryParam"
        :label-col="{
          style: { width: '70px' },
        }"
        :wrapper-col="{
          style: { width: '150px' },
        }"
      >
        <div class="query-header-div" >
          <a-form-item label="保险公司" style="margin-bottom: 0px">
            <j-dict-select-tag v-model:value="queryParam.company" dictCode="BXGS" placeholder="请选择保险公司" />
          </a-form-item>
          <a-form-item label="出保状态" style="margin-bottom: 0px">
            <j-dict-select-tag v-model:value="queryParam.policyState" dictCode="DZBDZT" placeholder="请选择出保状态" />
          </a-form-item>
          <a-form-item label="保险代理"  style="margin-bottom: 0px">
            <j-dict-select-tag v-model:value="queryParam.platform" dictCode="BXDL" placeholder="请选择保险公司" :disabled="disabled"/>
          </a-form-item>
          <a-form-item label="趋势类型"  style="margin-bottom: 0px">
            <j-dict-select-tag v-model:value="queryParam.qushi" dictCode="QSZD" placeholder="请选择趋势类型" :disabled="disabled"/>
          </a-form-item>
          <div class="date-group">
            <a @click="queryDay" class="date-btn">当日</a>
            <a @click="queryMouth" class="date-btn">本月</a>
            <a @click="queryYear" class="date-btn">本年度</a>
            <a-range-picker :style="{ width: '300px' }" v-model:value="queryParam.timeRange" />
          </div>
        </div>
      </a-form>
    </div>
    <div class="card-nums-div" >
      <div class="card-nums-item">
        <div class="card-nums-item-title">保单总数</div>
        <div class="card-nums-item-content">{{ sumResult.policyTotal }}</div>
      </div>

      <div class="card-nums-item">
        <div class="card-nums-item-title">保费总额</div>
        <div class="card-nums-item-content">{{ sumResult.premiumTotal }}</div>
      </div>

      <div class="card-nums-item">
        <div class="card-nums-item-title">退保总数</div>
        <div class="card-nums-item-content">{{ sumResult.refundTotal }}</div>
      </div>

      <div class="card-nums-item">
        <div class="card-nums-item-title">退保总额</div>
        <div class="card-nums-item-content">{{ sumResult.refundAmtTotal }}</div>
      </div>
    </div>
    <Card title="保费趋势">
      <InsuranceCostBar v-if="sumResult.amtList?.length > 0" :data="sumResult.amtList" :loading="loading" :numData="sumResult.numberList" />
      <a-empty v-else description="暂无数据" />
    </Card>
  </Card>
</template>
<script lang="ts" setup>
  import { ref, watch, onMounted } from 'vue';
  import { Card } from 'ant-design-vue';
  import { dateFormat } from '/@/utils/common/compUtils';
  import dayjs from 'dayjs';
  import { getDataStatisticsList } from '../indexInsurance.api';

  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  // import { BarChartDataItem } from '../indexInsurance.data';
  import InsuranceCostBar from './InsuranceCostBar.vue';
  import InsuranceOrderBar from './InsuranceOrderBar.vue';
  const activeKey = ref('tab1');

  const tabListTitle = [
    {
      key: 'tab1',
      tab: '保费趋势',
    },
    {
      key: 'tab2',
      tab: '单量趋势',
    },
  ];
  const queryParam = ref<any>({});
  const sumResult = ref<any>({});
  const loading = ref(true);

  onMounted(() => {
    queryMouth();
  });
  function queryDay() {
    const payBegin = dayjs();
    const payEnd = dayjs();
    queryParam.value.timeRange = [payBegin, payEnd];
  }
  function queryMouth() {
    const payBegin = dayjs().startOf('month');
    const payEnd = dayjs().endOf('month');
    queryParam.value.timeRange = [payBegin, payEnd];
  }

  function queryYear() {
    const payBegin = dayjs().startOf('year');
    const payEnd = dayjs().endOf('year');
    queryParam.value.timeRange = [payBegin, payEnd];
  }
  watch(
    () => queryParam,
    () => {
      reload();
    },
    {
      immediate: true,
      deep: true,
    }
  );
  function reload() {
    const params: any = {};
    if (queryParam.value.company) {
      params.insuranceCompany = queryParam.value.company;
    }
    if (queryParam.value.policyState) {
      params.policyState = queryParam.value.policyState;
    }
    if (queryParam.value.platform) {
      params.platform = queryParam.value.platform;
    }
    if (queryParam.value.qushi) {
      params.qushi = queryParam.value.qushi;
    }


    if (queryParam.value.timeRange) {
      const format = 'yyyy-MM-dd';
      const begin = dateFormat(queryParam.value.timeRange[0], format);
      const end = dateFormat(queryParam.value.timeRange[1], format);
      params.startDate = begin;
      params.endDate = end;
    } else {
      return;
    }
    loading.value = true;
    getDataStatisticsList(params)
      .then((res) => {
        console.log('getDataStatisticsList', res);
        sumResult.value = res;
      })
      .finally(() => {
        loading.value = false;
      });
  }

  function onTabChange(key) {
    activeKey.value = key;
  }
</script>
<style lang="less" scoped>
  .trend-div {
    margin: 10px;
    padding: 16px 16px 0px 16px;
    background: #fff;
  }
  .query-header {
    // margin: 10px;
    // padding: 16px 16px 0px 16px;
    // background: #fff;
    margin-bottom: 10px;
    .query-header-div {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    // display: flex;
    // justify-content: space-between;
    .date-group {
      display: flex;
      align-items: center;
      .date-btn {
        margin-right: 10px;
      }
    }
    .query-group-cust {
      width: calc(50% - 15px);
      min-width: 180px !important;
    }
    .query-group-split-cust {
      width: 30px;
      display: inline-block;
      text-align: center;
    }
  }

  .card-nums-div {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .card-nums-item {
      width: 20%;
      height: 128px;
      background-color: #ebf6ff;
      .card-nums-item-title {
        color: #444;
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        padding-top: 20px;
        margin-bottom: 20px;
      }
      .card-nums-item-content {
        color: #00509d;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
      }
    }
  }
  .insurance-analysis {
    display: flex;
  }
  .analysis-card-tabs {
    border: none !important;
  }
</style>
